import 'package:camera/camera.dart';
import 'package:flutter/material.dart';
import 'package:flutter_axrjc/page/main/main_home/logic.dart';
import 'package:flutter_axrjc/page/main/main_home/state.dart';
import 'package:flutter_axrjc/routes.dart';
import 'package:flutter_axrjc/style.dart';
import 'package:flutter_axrjc/util/Util.dart';
import 'package:flutter_axrjc/widget/CachePage.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:timeline_tile/timeline_tile.dart';

class MainHomePage extends StatelessWidget {
  const MainHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final logic = Get.find<MainHomeLogic>();
    final state = logic.state;
    return CachePage(
      child: Stack(
        children: [
          Container(
            height: Get.height,
            width: Get.width,
            decoration: const BoxDecoration(
                gradient: LinearGradient(colors: [
              Color(0xffF7D25D),
              orangeColor,
            ], begin: Alignment.topLeft, end: Alignment.bottomRight)),
          ),
          SafeArea(
            child: Column(
              children: [
                Stack(
                  // mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    Positioned(
                        child: Container(
                      width: Get.width,
                    )),
                    // InkWell(
                    //   onTap: () {
                    //     // Get.toNamed(MainRoutes.reportMonth);
                    //   },
                    //   child: Padding(
                    //     padding: const EdgeInsets.all(8.0),
                    //     child: Text(
                    //       "衰减排行榜",
                    //       style: TextStyle(
                    //           fontSize: 14.sp,
                    //           color: Colors.white,
                    //           fontWeight: FontWeight.w400),
                    //     ),
                    //   ),
                    // ),
                    Center(
                      child: Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Text(
                          "照度测量",
                          style: TextStyle(
                              fontSize: 16.sp,
                              color: Colors.white,
                              fontWeight: FontWeight.w500),
                        ),
                      ),
                    ),
                    Positioned(
                      right: 0,
                      top: 0,
                      child: InkWell(
                        onTap: () {
                          logic.share();
                        },
                        child: Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: Text(
                            "分享报告",
                            style: TextStyle(
                                fontSize: 14.sp,
                                color: Colors.white,
                                fontWeight: FontWeight.w400),
                          ),
                        ),
                      ),
                    ),
                  ],
                ),
                Expanded(
                  child: SingleChildScrollView(
                    child: Column(
                      children: [
                        const SizedBox(
                          height: 50,
                        ),
                        Stack(
                          children: [
                            Obx(() {
                              if (state.checkStatus.value ==
                                      CheckStatusType.checking &&
                                  logic.lightUtil.controller != null) {
                                return ClipRRect(
                                  borderRadius: BorderRadius.circular(100),
                                  child: SizedBox(
                                      width: 200,
                                      height: 200,
                                      child: CameraPreview(
                                          logic.lightUtil.controller!)),
                                );
                              }
                              return Center(
                                child: CircleAvatar(
                                  backgroundColor: Colors.white.withAlpha(51),
                                  radius: 81.w,
                                  child: CircleAvatar(
                                    backgroundColor: Colors.white.withAlpha(51),
                                    radius: 65.w,
                                    child: CircleAvatar(
                                      radius: 45.w,
                                      backgroundColor:
                                          Colors.white.withAlpha(51),
                                      child: CircleAvatar(
                                        radius: 25.w,
                                        backgroundColor: Colors.white,
                                        child: Image.asset(
                                          'assets/light.png',
                                          width: 23.75.w,
                                          height: 31.67.h,
                                        ),
                                      ),
                                    ),
                                  ),
                                ),
                              );
                            }),
                            Positioned(
                              left: 0,
                              bottom: 0,
                              right: 0,
                              child: Obx(() {
                                if (state.checkStatus.value ==
                                    CheckStatusType.checking) {
                                  return Container();
                                }
                                return Padding(
                                  padding: const EdgeInsets.only(left: 180),
                                  child: InkWell(
                                    onTap: logic.switchCamera,
                                    child: Column(
                                      children: [
                                        Obx(() {
                                          return Icon(
                                            state.isFront.value
                                                ? Icons
                                                    .photo_camera_front_outlined
                                                : Icons
                                                    .photo_camera_back_outlined,
                                            color: Colors.white,
                                          );
                                        }),
                                        Obx(() {
                                          return state.isFront.value
                                              ? const Text(
                                                  "前置",
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 13),
                                                )
                                              : const Text(
                                                  "后置",
                                                  style: TextStyle(
                                                      color: Colors.white,
                                                      fontSize: 13),
                                                );
                                        })
                                      ],
                                    ),
                                  ),
                                );
                              }),
                            )
                          ],
                        ),
                        const SizedBox(
                          height: 40,
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.end,
                          children: [
                            InkWell(
                              onTap: () {
                                Get.toNamed(MainRoutes.checkGuide,
                                    arguments: state.currentLampBean.value);
                              },
                              child: const Padding(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 15, vertical: 20),
                                child: Row(
                                  children: [
                                    Text(
                                      "灯具检测指导",
                                      style: TextStyle(
                                          color: Colors.white,
                                          fontWeight: FontWeight.bold),
                                    ),
                                    Icon(
                                      Icons.arrow_right_outlined,
                                      color: Colors.white,
                                    )
                                  ],
                                ),
                              ),
                            ),
                          ],
                        ),
                        Obx(() {
                          if (CheckStatusType.checking ==
                              state.checkStatus.value) {
                            return Container();
                          }
                          return Row(
                            mainAxisAlignment: MainAxisAlignment.spaceAround,
                            children: [
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 10),
                                  child: InkWell(
                                    onTap: logic.selectLamp,
                                    child: Container(
                                        padding: const EdgeInsets.symmetric(
                                            vertical: 13),
                                        decoration: BoxDecoration(
                                            color: Colors.orange,
                                            borderRadius:
                                                BorderRadius.circular(30)),
                                        child: Center(
                                          child: Obx(() {
                                            return Text(
                                              state.currentLampBean.value ==
                                                      null
                                                  ? "选择灯具"
                                                  : "重新选择",
                                              style: const TextStyle(
                                                  color: Colors.white,
                                                  fontWeight: FontWeight.bold),
                                            );
                                          }),
                                        )),
                                  ),
                                ),
                              ),
                              Expanded(
                                child: Padding(
                                  padding: const EdgeInsets.symmetric(
                                      horizontal: 10),
                                  child: InkWell(
                                    onTap: logic.startCheck,
                                    child: Container(
                                        padding: const EdgeInsets.symmetric(
                                            vertical: 13),
                                        decoration: BoxDecoration(
                                            color: Colors.white,
                                            borderRadius:
                                                BorderRadius.circular(30)),
                                        child: Center(
                                          child: Obx(() {
                                            switch (state.checkStatus.value) {
                                              case CheckStatusType.before:
                                                return const Text(
                                                  "一键检测",
                                                  style: TextStyle(
                                                      color: orangeColor,
                                                      fontWeight:
                                                          FontWeight.bold),
                                                );
                                              case CheckStatusType.checking:
                                                return Container();
                                              case CheckStatusType.end:
                                                return const Text(
                                                  "重新检测",
                                                  style: TextStyle(
                                                      color: orangeColor,
                                                      fontWeight:
                                                          FontWeight.bold),
                                                );
                                              case CheckStatusType.pause:
                                                return Container();
                                            }
                                          }),
                                        )),
                                  ),
                                ),
                              )
                            ],
                          );
                        }),
                        Padding(
                          padding: const EdgeInsets.all(8.0),
                          child: ListView(
                            shrinkWrap: true,
                            physics: const NeverScrollableScrollPhysics(),
                            children: [
                              Obx(() {
                                return TimelineTile(
                                  alignment: TimelineAlign.manual,
                                  lineXY: 0.05,
                                  isFirst: true,
                                  afterLineStyle: lineStyle(
                                      arrive: isInStep1(state) &&
                                          (isInStep2(state) ||
                                              isInStep3(state))),
                                  endChild: Padding(
                                    padding: const EdgeInsets.symmetric(
                                        horizontal: 10, vertical: 10),
                                    child: Obx(() {
                                      return Row(
                                        children: [
                                          Container(
                                            width: 5,
                                            decoration: const BoxDecoration(
                                                color: Color.fromARGB(
                                                    255, 241, 152, 66),
                                                borderRadius:
                                                    BorderRadius.horizontal(
                                                        left: Radius.circular(
                                                            5))),
                                          ),
                                          Expanded(
                                            child: Container(
                                              decoration: const BoxDecoration(
                                                  color: Colors.white,
                                                  borderRadius:
                                                      BorderRadius.horizontal(
                                                          right:
                                                              Radius.circular(
                                                                  5))),
                                              // child: Text(
                                              //   state.currentLampBean.value == null
                                              //       ? "选择灯具"
                                              //       : "已选：${state.currentLampBean.value!.fixtureName}",
                                              //   style: const TextStyle(
                                              //       color: orangeColor),
                                              // ),
                                              child: Padding(
                                                padding:
                                                    const EdgeInsets.all(8.0),
                                                child: Row(
                                                  children: [
                                                    Center(
                                                      child: Text(
                                                        state.currentLampBean
                                                                    .value ==
                                                                null
                                                            ? "选择灯具"
                                                            : "已选：${state.currentLampBean.value!.fixtureName}",
                                                        style: const TextStyle(
                                                            color: orangeColor),
                                                      ),
                                                    ),
                                                  ],
                                                ),
                                              ),
                                            ),
                                          ),
                                        ],
                                      );
                                    }),
                                  ),
                                  indicatorStyle: IndicatorStyle(
                                    indicator: Center(
                                      child: Obx(() {
                                        return Indicator(
                                            isFinish: isInStep1(state));
                                      }),
                                    ),
                                  ),
                                );
                              }),
                              Obx(() {
                                return TimelineTile(
                                  alignment: TimelineAlign.manual,
                                  lineXY: 0.05,
                                  beforeLineStyle: lineStyle(
                                      arrive: isInStep1(state) &&
                                          (isInStep2(state) ||
                                              isInStep3(state))),
                                  afterLineStyle:
                                      lineStyle(arrive: isInStep3(state)),
                                  endChild: Padding(
                                    padding: const EdgeInsets.all(10),
                                    child: Row(
                                      children: [
                                        Container(
                                          width: 5,
                                          decoration: const BoxDecoration(
                                              color: Color.fromARGB(
                                                  255, 241, 152, 66),
                                              borderRadius:
                                                  BorderRadius.horizontal(
                                                      left:
                                                          Radius.circular(5))),
                                        ),
                                        Expanded(
                                          child: Container(
                                            decoration: const BoxDecoration(
                                                color: Colors.white,
                                                borderRadius:
                                                    BorderRadius.horizontal(
                                                        right: Radius.circular(
                                                            5))),
                                            child: Obx(() {
                                              switch (state.checkStatus.value) {
                                                case CheckStatusType.before:
                                                  return const Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.all(8.0),
                                                        child: Text(
                                                          "未开始检测",
                                                          style: TextStyle(
                                                              color:
                                                                  orangeColor),
                                                        ),
                                                      ));
                                                case CheckStatusType.checking:
                                                  return Padding(
                                                    padding:
                                                        const EdgeInsets.all(
                                                            8.0),
                                                    child: Column(
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .start,
                                                      children: [
                                                        Obx(() {
                                                          return Text(
                                                            "开始时间：${Util.date2String(state.startTime.value, pattern: "yyyy-MM-dd HH:mm:ss")}",
                                                            style: const TextStyle(
                                                                color:
                                                                    orangeColor),
                                                          );
                                                        }),
                                                        Obx(() {
                                                          return Text(
                                                            "当前亮度：${state.currentLux.value}lux",
                                                            style: const TextStyle(
                                                                color:
                                                                    orangeColor),
                                                          );
                                                        }),
                                                        // Obx(() {
                                                        //   return Text(
                                                        //     "当前色温：${state.currentTemp.value}k",
                                                        //     style: const TextStyle(
                                                        //         color:
                                                        //             orangeColor),
                                                        //   );
                                                        // }),
                                                        Obx(() {
                                                          return Text(
                                                            "剩余时间：${state.countdown.value}s",
                                                            style: const TextStyle(
                                                                color:
                                                                    orangeColor),
                                                          );
                                                        }),
                                                        Row(
                                                          mainAxisAlignment:
                                                              MainAxisAlignment
                                                                  .end,
                                                          children: [
                                                            InkWell(
                                                              onTap: logic
                                                                  .interrupt,
                                                              child: Padding(
                                                                padding:
                                                                    const EdgeInsets
                                                                        .all(
                                                                        8.0),
                                                                child:
                                                                    Container(
                                                                  padding: const EdgeInsets
                                                                      .symmetric(
                                                                      horizontal:
                                                                          10,
                                                                      vertical:
                                                                          5),
                                                                  decoration: BoxDecoration(
                                                                      color:
                                                                          orangeColor,
                                                                      borderRadius:
                                                                          BorderRadius.circular(
                                                                              5)),
                                                                  child:
                                                                      const Text(
                                                                    "中断",
                                                                    style: TextStyle(
                                                                        color: Colors
                                                                            .white),
                                                                  ),
                                                                ),
                                                              ),
                                                            ),
                                                          ],
                                                        )
                                                      ],
                                                    ),
                                                  );
                                                case CheckStatusType.end:
                                                  return const Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.all(8.0),
                                                        child: Text(
                                                          "检测完成",
                                                          style: TextStyle(
                                                              color:
                                                                  orangeColor),
                                                        ),
                                                      ));
                                                case CheckStatusType.pause:
                                                  return const Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.all(8.0),
                                                        child: Text(
                                                          "暂停检测",
                                                          style: TextStyle(
                                                              color:
                                                                  orangeColor),
                                                        ),
                                                      ));
                                              }
                                            }),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  indicatorStyle: IndicatorStyle(
                                    indicator: Center(
                                      child: Obx(() {
                                        return Indicator(
                                            isFinish: isInStep1(state) &&
                                                (isInStep2(state) ||
                                                    isInStep3(state)));
                                      }),
                                    ),
                                  ),
                                );
                              }),
                              Obx(() {
                                return TimelineTile(
                                  alignment: TimelineAlign.manual,
                                  lineXY: 0.05,
                                  beforeLineStyle:
                                      lineStyle(arrive: isInStep3(state)),
                                  isLast: true,
                                  endChild: Padding(
                                    padding: const EdgeInsets.all(10),
                                    child: Row(
                                      children: [
                                        Container(
                                          width: 5,
                                          decoration: const BoxDecoration(
                                              color: Color.fromARGB(
                                                  255, 241, 152, 66),
                                              borderRadius:
                                                  BorderRadius.horizontal(
                                                      left:
                                                          Radius.circular(5))),
                                        ),
                                        Expanded(
                                          child: Container(
                                            decoration: const BoxDecoration(
                                                color: Colors.white,
                                                borderRadius:
                                                    BorderRadius.horizontal(
                                                        right: Radius.circular(
                                                            5))),
                                            child: Obx(() {
                                              switch (state.checkStatus.value) {
                                                case CheckStatusType.before:
                                                  return const Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.all(8.0),
                                                        child: Text(
                                                          "未检测完成",
                                                          style: TextStyle(
                                                              color:
                                                                  orangeColor),
                                                        ),
                                                      ));
                                                case CheckStatusType.checking:
                                                  return const Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.all(8.0),
                                                        child: Text(
                                                          "检测中",
                                                          style: TextStyle(
                                                              color:
                                                                  orangeColor),
                                                        ),
                                                      ));
                                                case CheckStatusType.end:
                                                  return Padding(
                                                    padding:
                                                        const EdgeInsets.all(
                                                            10),
                                                    child: Column(
                                                      crossAxisAlignment:
                                                          CrossAxisAlignment
                                                              .start,
                                                      children: [
                                                        Obx(() {
                                                          return Text(
                                                            "开始时间：${Util.date2String(state.startTime.value, pattern: "yyyy-MM-dd HH:mm:ss")}",
                                                            style: const TextStyle(
                                                                color:
                                                                    orangeColor),
                                                          );
                                                        }),
                                                        Obx(() {
                                                          return Text(
                                                            "结束时间：${Util.date2String(state.endTime.value, pattern: "yyyy-MM-dd HH:mm:ss")}",
                                                            style: const TextStyle(
                                                                color:
                                                                    orangeColor),
                                                          );
                                                        }),
                                                        Obx(() {
                                                          return Text(
                                                            "平均亮度：${state.currentLux.value}lux",
                                                            style: const TextStyle(
                                                                color:
                                                                    orangeColor),
                                                          );
                                                        }),
                                                        // Obx(() {
                                                        //   return Text(
                                                        //     "平均色温：${state.currentTemp.value}k",
                                                        //     style: const TextStyle(
                                                        //         color:
                                                        //             orangeColor),
                                                        //   );
                                                        // }),
                                                        Row(
                                                          mainAxisAlignment:
                                                              MainAxisAlignment
                                                                  .end,
                                                          children: [
                                                            Padding(
                                                              padding:
                                                                  const EdgeInsets
                                                                      .all(8.0),
                                                              child: InkWell(
                                                                onTap: logic
                                                                    .showUploadDialog,
                                                                child:
                                                                    Container(
                                                                  padding: const EdgeInsets
                                                                      .symmetric(
                                                                      horizontal:
                                                                          10,
                                                                      vertical:
                                                                          5),
                                                                  decoration: BoxDecoration(
                                                                      color:
                                                                          orangeColor,
                                                                      borderRadius:
                                                                          BorderRadius.circular(
                                                                              5)),
                                                                  child:
                                                                      const Text(
                                                                    "上传",
                                                                    style: TextStyle(
                                                                        color: Colors
                                                                            .white),
                                                                  ),
                                                                ),
                                                              ),
                                                            ),
                                                          ],
                                                        ),
                                                      ],
                                                    ),
                                                  );
                                                case CheckStatusType.pause:
                                                  return const Align(
                                                      alignment:
                                                          Alignment.centerLeft,
                                                      child: Padding(
                                                        padding:
                                                            EdgeInsets.all(8.0),
                                                        child: Text(
                                                          "暂停检测",
                                                          style: TextStyle(
                                                              color:
                                                                  orangeColor),
                                                        ),
                                                      ));
                                              }
                                            }),
                                          ),
                                        ),
                                      ],
                                    ),
                                  ),
                                  indicatorStyle: IndicatorStyle(
                                    indicator: Center(child: Obx(() {
                                      return Indicator(
                                          isFinish: isInStep1(state) &&
                                              isInStep3(state));
                                    })),
                                  ),
                                );
                              }),
                            ],
                          ),
                        ),
                      ],
                    ),
                  ),
                ),
                Container(
                    padding:
                        const EdgeInsets.symmetric(vertical: 7, horizontal: 10),
                    width: Get.width,
                    color: Colors.white.withAlpha(51),
                    child: Obx(() {
                      return Text(
                        state.device.value,
                        style: const TextStyle(color: Colors.white),
                      );
                    })),
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget Indicator({required bool isFinish}) {
    if (!isFinish) {
      return CircleAvatar(
        radius: 10,
        backgroundColor: Colors.white.withAlpha(51),
      );
    } else {
      return CircleAvatar(
        radius: 80,
        backgroundColor: Colors.white.withAlpha(51),
        child: const Padding(
          padding: EdgeInsets.all(3),
          child: CircleAvatar(
            backgroundColor: Color.fromARGB(255, 241, 152, 66),
          ),
        ),
      );
    }
  }

  lineStyle({required bool arrive}) {
    return !arrive
        ? LineStyle(
            color: Colors.white.withAlpha(51),
            thickness: 4,
          )
        : const LineStyle(
            color: Color(0xffF7D25D),
            thickness: 4,
          );
  }

  bool isInStep1(MainHomeState state) {
    return state.currentLampBean.value != null;
  }

  bool isInStep2(MainHomeState state) {
    return state.checkStatus.value == CheckStatusType.checking;
  }

  bool isInStep3(MainHomeState state) {
    return state.checkStatus.value == CheckStatusType.end;
  }
}
